<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="comm.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			li {
				list-style: none;
			}
			
			.warp {
				width: 1200px;
				margin: 100px auto;
			}
			
			.slide {
				height: 500px;
				position: relative;
			}
			
			.slide li {
				position: absolute;
				/*left: 200px;*/
				top: 0;
			}
			
			.slide li img {
				width: 100%;
			}
			
			.arrow {
				opacity: 0;
			}
			
			.prev,
			.next {
				width: 76px;
				height: 112px;
				position: absolute;
				top: 50%;
				margin-top: -56px;
				background: url(imag/prev.png) no-repeat;
				z-index: 99;
			}
			
			.next {
				right: 0;
				background-image: url(imag/next.png);
			}
		</style>
	</head>

	<body>
		<div class="warp" id="warp">
			<div class="slide" id="slide">
				<ul>
					<li>
						<a href="#"><img src="imag/banner11.jpg" /></a>
					</li>
					<li>
						<a href="#"><img src="imag/banner13.jpg" /></a>
					</li>
					<li>
						<a href="#"><img src="imag/banner3.jpg" /></a>
					</li>
					<li>
						<a href="#"><img src="imag/banner6.jpg" /></a>
					</li>
					<li>
						<a href="#"><img src="imag/banner8.jpg" /></a>
					</li>
				</ul>
				<div class="arrow" id="arrow">
					<a href="javascript:" class="prev" id="arrLeft"></a>
					<a href="javascript:" class="next" id="arrRight"></a>
				</div>
			</div>
		</div>
		<script>
			var config = [{
					width: 400,
					top: 20,
					left: 50,
					opacity: 0.2,
					zIndex: 2
				}

				, {
					width: 600,
					top: 70,
					left: 0,
					opacity: 0.8,
					zIndex: 3
				}

				, {
					width: 800,
					top: 100,
					left: 200,
					opacity: 1,
					zIndex: 4
				}

				, {
					width: 600,
					top: 70,
					left: 600,
					opacity: 0.8,
					zIndex: 3
				}

				, {
					width: 400,
					top: 20,
					left: 750,
					opacity: 0.2,
					zIndex: 2
				}

			];
			//页面加载事件
			window.onload = function() {
				//加动画锁，执行完一个动画才能继续
				var flag = true;
				//图片散开，获取所有的li
				var list = my$("slide").getElementsByTagName("li");

				function assign() {
					for(var i = 0; i < list.length; i++) {
						animate(list[i],  config[i],function(){
							flag=true;
						});
					}
				}
				assign();
				//鼠标进入按钮显示
				my$("warp").onmouseover = function() {
						animate(my$("arrow"), {
							opacity: 1
						});
					}
					//鼠标移开按钮隐藏
				my$("warp").onmouseout = function() {
						animate(my$("arrow"), {
							opacity: 0	
						});
					}
					//点击右边按钮进行移动
				my$("arrRight").onclick = function() {
						if(flag) {
							flag=false;
							config.push(config.shift());
							assign();
						}
					}
					//点击左边边按钮进行移动
				my$("arrLeft").onclick = function() {
					if(flag) {
						flag=false;
						config.unshift(config.pop());
						assign();
					}
				}

			}
		</script>
	</body>

</html>